<template>
	<view class="container">
		<tui-loading v-show="!pageData.loading"></tui-loading>
		<view class="page" v-show="pageData.loading">
			<!--header-->
			<tui-navigation-bar @init="initNavigation" @change="changeNavigation" :title="header.title" :color="tui.getColorSite().title.color" :backgroundColor="tui.getColorSite().title.backgroundColor" :splitLine="header.splitLine" :isOpacity="header.isOpacity" :maxOpacity="header.maxOpacity" :transparent="header.transparent" :scrollTop="header.scrollTop" :scrollRatio="header.scrollRatio" :isCustom="header.isCustom" :isImmersive="header.isImmersive" :isFixed="header.isFixed" :backdropFilter="header.backdropFilter" :dropDownHide="header.dropDownHide" :zIndex="header.zIndex">
				<view class="tui-header-box" :style="{ marginTop: header.init.top + 'px' }">
					<!--个人中心页为主页面，不应有返回键-->
					<!-- #ifndef MP -->
					<view class="tui-header-box-icon">
						<view class="tui-icon-box tui-icon-setup" @tap="detail('publicList', {title:'账户设置',tpl:'setting',})">
							<tui-icon name="setup" :color="header.opacity > 0.8 ? '#FFFFFF' : '#FFFFFF'" :size="26"></tui-icon>
						</view>
					</view>
					<!-- #endif -->
				</view>
			</tui-navigation-bar>
			<view v-if="header.opacity > 0.8" :style="{ height: header.init.height + 'px' }"></view>
			<!--header-->
			<view class="tui-mybg-box" style="height: 464rpx;">
				<image :src="pageData.member_background_img" class="tui-my-bg-h-464" mode="widthFix"></image>
				<view class="tui-header-center" @click="detail('publicForm', {title:'资料修改',tpl:'publicUserDetail',})">
					<image :src="pageData.portrait.url" class="tui-avatar"></image>
					<view class="tui-info">
						<view class="tui-nickname">
							{{ pageData.nick_name||'未设置' }}
							<!-- {{ pageData.nick_name||'未设置' }}[{{ pageData.real_name||'未设置' }}] -->
						</view>
						<view class="tui-explain">
							{{ pageData.tel_string }}
						</view>
						<view class="tui-vip-box" v-if="pageData.level_text">
							{{pageData.level_text}}
						</view>
					</view>
					<view class="tui-btn-edit">
						<tui-tag type="white" padding="12rpx 26rpx" size="20rpx" plain shape="circle">编辑</tui-tag>
					</view>
				</view>
				<view class="tui-header-btm" v-show="false">
					<view class="tui-btm-item">
						<view class="tui-btm-num">25</view>
						<view class="tui-btm-text">收藏夹</view>
					</view>
					<view class="tui-btm-item">
						<view class="tui-btm-num">22</view>
						<view class="tui-btm-text">店铺关注</view>
					</view>
					<view class="tui-btm-item">
						<view class="tui-btm-num">3</view>
						<view class="tui-btm-text">喜欢的内容</view>
					</view>
					<view class="tui-btm-item">
						<view class="tui-btm-num">44</view>
						<view class="tui-btm-text">足迹</view>
					</view>
				</view>
			</view>
			<view class="tui-content-box" style="top: -180rpx;">
				<view style="padding: 0 30rpx;">
					<view class="tui-box tui-order-box" style="padding-bottom: 20rpx;">
						<tui-list-cell :arrow="true" padding="0" lineLeft="0" @click="detail('orderList','all')">
							<view class="tui-cell-header">
								<view class="tui-cell-title">我的订单</view>
								<view class="tui-cell-sub">查看全部订单</view>
							</view>
						</tui-list-cell>
						<view class="tui-list tui-order-list">
							<view class="tui-item" @click="detail('orderList', item.key)" v-for="(item, index) in user.orderData" :key="index" v-if="user.orderData">
								<view class="tui-icon-box">
									<image :src="item.icon" class="tui-icon"></image>
									<view class="tui-badge tui-badge-red" v-if="item.num > 0">{{ item.num }}</view>
								</view>
								<view class="tui-text">{{ item.text }}</view>
							</view>
						</view>
					</view>
					<view class="tui-box tui-assets-box" style="padding-bottom: 20rpx;">
						<tui-list-cell padding="0" unlined :hover="false">
							<view class="tui-cell-header">
								<view class="tui-cell-title">我的资产</view>
							</view>
						</tui-list-cell>
						<view class="tui-list tui-assets-list">
							<view class="tui-item" @click="detail('propertyData', item)" v-for="(item, index) in user.propertyData" :key="index" v-if="user.propertyData">
								<view class="tui-num">
									<text>{{ item.value }}</text>
								</view>
								<view class="tui-text">{{ item.text }}</view>
							</view>
						</view>
					</view>
					<view class="tui-box tui-tool-box">
						<tui-list-cell :arrow="false" padding="0" lineLeft="0">
							<view class="tui-cell-header">
								<view class="tui-cell-title">常用工具</view>
							</view>
						</tui-list-cell>
						<view class="tui-list tui-flex-wrap" style="padding-bottom: 30rpx;">
							<view class="tui-tool-item" @click="detail(item.urlHref, item)" v-for="(item, index) in user.actionData" :key="index" v-if="user.actionData">
								<view class="tui-icon-box">
									<image :src="item.icon" mode="widthFix" class="tui-icon"></image>
									<view class="tui-badge tui-badge-red" v-if="item.num > 0">{{ item.num }}</view>
								</view>
								<view class="tui-tool-text">{{item.title}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="tui-title-img">
					<image src="../static/img/img_home_update_3x.png" mode="widthFix"></image>
				</view>
				<view class="tui-product-box" v-if="listData.data.length > 0">
					<goodsList :list="listData.data" showType="list" @click="detail" />
					<tui-loadmore :index="3" :type="tui.getColorSite().loadmore.type" v-if="listData.xhr.status && listData.status" :text="listData.xhr.text"></tui-loadmore>
					<tui-divider width="60%" :dividerColor="tui.getColorSite().divider.dividerColor" :color="tui.getColorSite().divider.color" v-if="!listData.xhr.status && listData.status">{{
							listData.xhr.text }}</tui-divider>
				</view>
			</view>
			<tui-actionsheet :zIndex="99999" :show="pageData.actionsheet.show" :itemList="pageData.actionsheet.itemList" :maskClosable="pageData.actionsheet.maskClosable" :tips="pageData.actionsheet.tips" :color="tui.getColorSite().actionsheet.color" :radius="pageData.actionsheet.radius" :isCancel="pageData.actionsheet.isCancel" zIndex="991024" @click="actionsheetClick" @cancel="actionsheetClose">
			</tui-actionsheet>
			<view class="tui-safearea-bottom"></view>
			<tabBar :current="Number(1)" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				get: {},
				header: {
					opacity: 0,
					title: '会员中心', //NavigationBar标题
					splitLine: true, //是否需要分割线
					isOpacity: true, //是否设置不透明度
					maxOpacity: 1, //不透明度最大值 0-1
					transparent: false, //背景透明 （设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效）
					scrollTop: 0.5, //滚动条滚动距离
					scrollRatio: 0.3, //isOpacity 为true时生效（opacity=scrollTop /windowWidth * scrollRatio）
					isCustom: false, //是否自定义NavigationBar内容
					isImmersive: true, //是否沉浸式,
					isFixed: true, //是否固定
					backdropFilter: false, //是否开启高斯模糊效果[仅在支持的浏览器有效果]，为true时maxOpacity设置小于1的值
					dropDownHide: true, //下拉隐藏NavigationBar，主要针对有回弹效果ios端
					zIndex: 9998, //z-index值
					init: {
						width: 0,
						height: 0,
						left: 0,
						top: 0,
						top: 0,
						scrollH: 0,
					},
				},
				pageData: {
					loading: false,
					member_background_img: '',
					tel: '',
					real_name: '',
					nick_name: '',
					portrait: '',
					level_text: '',
					actionsheet: {
						show: false,
						tips: "",
						itemList: [],
						maskClosable: true,
						radius: true,
						isCancel: true,
						type: '',
						param: {},

					},
				},
				listData: {
					data: {},
					count: 0,
					page: 0,
					length: 0,
					isMore: false,
					xhr: {
						url: '/goods',
						status: true,
						text: '正在加载...',
					},
					status: true,
				},
				appInit: {},
				user: {},
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad(e) {
			let that = this;
			// uni.startPullDownRefresh();
			console.log("self:onLoad++++++++++++++++++++++++++++++++++++++++++++++++++");
			uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			if (typeof(e.scene) != 'undefined') {
				e = that.tui.getUrlkey(decodeURIComponent(e.scene));
			}
			that.get = e;
			if (typeof that.get.title !== 'undefined') {
				that.header.title = that.get.title;
				if (that.header.title.length > 13) {
					that.header.title = that.header.title.slice(0, 13) + '...';
				}
				that.$forceUpdate();
			}
			console.log("self:getData=>", that.get);
			let obj = {};
			uni.getSystemInfo({
				success: function(res) {
					that.header.init.width = obj.left || res.windowWidth;
					that.header.init.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					that.header.init.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					that.header.init.scrollH = res.windowWidth * 0.6;
					that.header.init.scrollH = res.windowWidth * 1;
				}
			});
			that.$forceUpdate();
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let that = this;
			that.appInit = that.tui.getCache("appInit");
			console.log('self:appInit=>', that.appInit);
			that.pageData.member_background_img = that.appInit.image.member_background_img;
			that.tui.upDataUserInfo(function(res) {
				that.user = res.data;
				console.log('self:user=>', that.user);
				that.initPageUserData();
				if (that.pageData.loading === false) {
					that.initialize();
				}
			});
		},
		// 监听页面滚动，参数为Object
		onPageScroll(e) {
			let that = this;
			that.header.scrollTop = e.scrollTop;
			that.$forceUpdate();
		},
		methods: {
			initPageUserData() {
				let that = this;
				that.pageData.nick_name = that.user.userInfo.nick_name;
				that.pageData.real_name = that.user.userInfo.real_name;
				that.pageData.portrait = that.user.userInfo.portrait;
				that.pageData.tel = that.user.userInfo.tel;
				that.pageData.level_text = that.user.userInfo.level_text;
			},
			initialize() {
				let that = this;
				setTimeout(function() {
					that.__init();
				}, 100);
			},
			async __init() {
				let that = this;
				that.pageData.loading = true;
				that.listData.page = 0;
				that.initList(true)
			},
			async detail(type, item = {}) {
				let that = this;
				let paramsData = {};
				paramsData.title = item.title;
				if (typeof item.tpl !== 'undefined') {
					paramsData.tpl = item.tpl;
				}
				if (typeof item.key !== 'undefined') {
					paramsData.key = item.key;
				}
				if (typeof item.id !== 'undefined') {
					paramsData.id = item.id;
				}
				switch (type) {
					case 'publicForm':
						that.tui.urlHref('/pages/public-form?' + that.tui.initParamsData(paramsData));
						break;
					case 'publicInfo':
						that.tui.urlHref('/pages/public-info?' + that.tui.initParamsData(paramsData));
						break;
					case 'publicList':
					case 'propertyData':
						that.tui.urlHref('/pages/public-list?' + that.tui.initParamsData(paramsData));
						break;
					case 'orderList':
						switch (typeof item) {
							case 'string':
								that.tui.urlHref('/pages/order-list?' + that.tui.initParamsData({
									key: item,
								}));
								break;
							case 'object':
								paramsData.key = 'all';
								that.tui.urlHref('/pages/order-list?' + that.tui.initParamsData(paramsData));
								break;
						}
						break;
					case 'goodsClick':
						that.tui.urlHref('/pages/good-info' + '?' + that.tui.initParamsData(paramsData));
						break;
					case 'achievement':
						that.tui.urlHref('/pages/achievement' + '?' + that.tui.initParamsData(paramsData));
						break;
					default:
						console.log(type, item);
						break;
				}
			},
			async initList() {
				let that = this;
				if (that.listData.xhr.url === false) {
					that.listData.status = false;
					return;
				}
				if (that.listData.page == 0) {
					that.listData.data = [];
					that.listData.isMore = true;
					that.listData.status = true;
				}
				let param = {
					page: that.listData.page,
					length: that.tui.requestPageLength,
				};
				let response = await that.tui.get(that.listData.xhr.url, param);
				switch (response.status) {
					case 0:
						response = response.data;
						// 当前分页为0的时候 返回数据为0  暂无数据
						if (response.count == 0) {
							that.listData.isMore = false;
							that.listData.xhr.status = false;
							that.listData.xhr.text = '暂无数据... ...';
						} else {
							if (that.listData.page == 0) {
								if (response.data.length < param.length) {
									that.listData.status = false;
								}
							}
							that.listData.data = that.listData.data.concat(response.data);
							if (response.data.length < param.length) {
								that.listData.isMore = false;
								that.listData.xhr.status = false;
								if (response.data.length != 0) {
									that.listData.xhr.text = '没有更多啦 ... ...';
								}
							}
						}
						break;
					default:
						that.tui.toast(response.info, false, function() {
							that.listData.isMore = false;
							that.listData.xhr.status = false;
							that.listData.xhr.text = response.info;
						}, 1500);
						break;
				}
				that.$forceUpdate();
			},
			initNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.header.top = e.top;
				that.$forceUpdate();
			},
			changeNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.$forceUpdate();
			},
			back() {
				let that = this;
				that.tui.urlBack(1);
			},
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			let that = this;
			if (that.listData.isMore == true) {
				that.listData.page++
				that.initList();
			}
		},
		// 监听页面隐藏
		onHide() {
			let that = this;
			that.pageData.loading = false;
		},
		// 监听页面卸载
		onUnload() {
			let that = this;
			that.pageData.loading = false;
		},
		// 页面返回
		onBackPress() {
			let that = this;
			that.pageData.loading = false;
		},
		// #ifdef MP
		onShareAppMessage() {
			// console.log('分享!')
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	.tui-content-box {
		width: 100%;
		box-sizing: border-box;
		position: relative;
		top: -72rpx;
		z-index: 10;

		.tui-order-box {
			height: 208rpx;

		}

		.tui-order-list {

			height: 134rpx;
		}

		.tui-assets-box {
			height: 178rpx;
			margin-top: 20rpx;
		}

		.tui-assets-list {
			height: 84rpx;
		}

		.tui-tool-box {
			margin-top: 20rpx;
		}

		.tui-box {
			width: 100%;
			background: #fff;
			box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
			border-radius: 10rpx;
			overflow: hidden;

			.tui-list {
				width: 100%;
				height: 134rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.tui-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;

				}

				.tui-tool-item {
					width: 25%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding-top: 50rpx;
				}


				.tui-num {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					position: relative;
				}

				.tui-text {
					font-size: 24rpx;
					font-weight: 400;
					color: #666;
					padding-top: 6rpx;
				}

				.tui-icon-box {

					.tui-icon {
						width: 56rpx;
						height: 56rpx;
						display: block;
					}

					.tui-badge-icon {
						width: 66rpx;
						height: 30rpx;
						position: absolute;
						right: 0;
						transform: translateX(88%);
						top: -15rpx;
					}
				}
			}
		}

	}
</style>